import React from 'react';
import './TodoList.scss'
import Top from './top'
import Bottom from './bottom';
import { useState } from 'react';
import ContextTodo, { state } from './contextTodo'
const { Provider } = ContextTodo
const TodoList = () => {

    const [data, setData] = useState(state)
    const add = (e) => {
        let objTodo = { ...data }
        objTodo.todoList.push(e)
        setData(objTodo)
    }
    return (
        <>
            <div className='TodoList'>
                <Provider value={{ ...data, add }}>
                    <div>
                        <Top></Top>
                    </div>
                    <div>
                        <Bottom></Bottom>
                    </div>
                </Provider>
            </div>
        </>
    );
};
export default TodoList;